<!-- 及时通讯 -->
<template>
  <div class='chat'>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <div class="recent contacts recentContacts"> <span class="recent">30天内联系人</span></div>
          <!-- 左侧联系人列表 -->
          <contacts @contactsInfo="contactsInfo" />
        </div>
      </el-col>
      <el-col :span="16" v-show="switchContactsInfo.receiverUserName">
        <div class="grid-content bg-purple">
          <div class="contact information contactInformation" v-show="switchContactsInfo.receiverUserName">
            <span
              class="contactName">{{switchContactsInfo.senderUserAccountType == 1 ? switchContactsInfo.receiverUserName : switchContactsInfo.senderUserName || '暂无'}}</span>
            <span>{{switchContactsInfo.companyName || '暂无'}}</span>
            <el-divider direction="vertical"></el-divider>
            <span>{{switchContactsInfo.jobName || '运营经理'}}</span>
          </div>
          <!-- 右侧聊天区 -->
          <chatWindow :switchContactsInfo="switchContactsInfo" />
        </div>
      </el-col>

      <el-col :span="16" v-show="!switchContactsInfo.receiverUserName">
        <div class="grid-content bg-purple">
          <div class="noContacts">
            <h6>还未与任何HR进行过沟通</h6>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 聊天 左侧联系人列表
import contacts from './chatComponent/contacts'
//  聊天 右侧聊天区
import chatWindow from './chatComponent/chatWindow'

export default {
  components: {
    contacts,
    chatWindow
  },
  data () {
    return {
      switchContactsInfo: ''
    };
  },
  computed: {},
  watch: {},
  methods: {
    contactsInfo (info) {
      console.log(info, 'info')
      this.switchContactsInfo = info
    }
  },
  created () {

  },
  mounted () {

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.chat {
    width: 100%;
    /* height: 460px; */
    height: 600px;
    background: #ffffff;
}
.recentContacts {
    width: 100%;
    height: 49px;
    text-align: left;
    line-height: 49px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 600;
    color: rgba(85, 85, 85, 1);
    border-right: 1px solid rgba(232, 232, 232, 1);
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}

.recentContacts .recent {
    display: inline-block;
    width: 136px;
    text-align: center;
}

.contactInformation {
    width: 100%;
    height: 49px;
    line-height: 49px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}

.contactInformation .contactName {
    width: 92px;
    display: inline-block;
    text-align: center;
    font-weight: 600;
    margin-right: 15px;
}

.bg-purple .noContacts {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 600px;
    border-left: 1px solid #e5e5e5;
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 200;
    color: rgba(153, 153, 153, 1);
}
</style>